<template>
	<view>
		<!-- 
		使用原生地图组件可以直接绘制腾讯地图
		longitude: 中心经度
		latitude: 中心纬度	
		markers: 覆盖物集合
		-->
		<map id="map" style="width: 100%; height: 600px;" :longitude="longitude" :latitude="latitude">
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers: [],
				latitude: 23.099994,
				longitude: 113.324520,
				mapContext: null
			}
		},
		methods: {
			addMarkers() {
				const marker = {
					id: 1,
					width: 50,
					height: 50,
					joinCluster: true, // 指定了该参数才会参与聚合
					label: {
						width: 50,
						height: 30,
						borderWidth: 1,
						borderRadius: 10,
						bgColor: '#ffffff'
					}
				};

				const positions = [{
					latitude: 23.099994,
					longitude: 113.324520,
				}, {
					latitude: 23.099994,
					longitude: 113.322520,
				}, {
					latitude: 23.099994,
					longitude: 113.326520,
				}, {
					latitude: 23.096994,
					longitude: 113.329520,
				}]

				const markers = []

				positions.forEach((p, i) => {
					const Marker = {...marker, ...p}
					markers.push(Marker)
				})
	
				this.mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
			}
		},
		onReady() {
			// 创建并返回 map 上下文 mapContext 对象
			// 第一个参数为map组件id
			// 第二个参数传入this
			this.mapContext = uni.createMapContext("map", this);
			// 初始化点聚合
			this.mapContext.initMarkerCluster({
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
					console.log('initMarkerCluster', res)
				}
			});
			// 添加点聚合的覆盖物集合
			this.addMarkers();
		},
	}
</script>